<template>
	<el-popover placement="bottom" width="290" height="300" v-model="visible" @show="$emit('show')" trigger="click">
		<div class="default-popver">
			<div class="popver-head">
				<div class="tabs-item" :style="{borderBottom: currActive === 'first' ? '2px solid #1890ff' : ''}" @click.stop="currActive = 'first'">{{fieldType === 'member' ? '成员' : '部门'}}</div>
				<!-- 成员、部门 -->
				<div class="tabs-item" v-if="fieldType === 'member'" :style="{borderBottom: currActive === 'two' ? '2px solid #1890ff' : ''}" @click.stop="currActive = 'two'">动态</div>
				<!-- 动态 -->
			</div>
      <el-row v-show="currActive === 'first'">
				<moSelect
				@handleCheckChange="handleCheckChange"
				@handleClickNode="handleClickNode"
				:data="fixedList"
				:value="fixedValue"
				:defaultProps="{
					id: '_id',
					name: 'name'
				}"
				v-if="fieldType === 'member'"
				:showCheckbox="isCheckbox">
				</moSelect>
				<selectTree v-else :data="fixedList" ref="selectTree" :checkStrictly="true" :value="fixedValue" @handleCheckChange="handleCheckChange" @handleClickNode="handleClickNode" :defaultProps="defaultProps" :showCheckbox="isCheckbox">
					<template v-slot="{data}" v-if="isFilter">
						{{data.name}}<br>
						<span class="prompt" :class="isCheckbox ? '': 'radio'" v-if="data.pathName">{{data.pathName}}</span>
					</template>
				</selectTree>
			</el-row>
      <el-row v-show="currActive === 'two'" class="popover-height">
				<moSelect :data="dynamicList" :value="dynamValue" :defaultProps="{
            id: 'businessId',
            name: 'name'
          }" @handleCheckChange="handleCheckChange" @handleClickNode="handleClickNode" :showCheckbox="isCheckbox">
				</moSelect>
			</el-row>
		</div>
		<inputContent :clear="clear" :visible="visible" :selected="isSelect" slot="reference">
			<el-tag closable v-for="one in tagFixedValue" :key="'fix' + one._id" class="tag" size="small" @close="close(one._id || one.id, 'fixedValue')"><span class="ellipsis">{{one && one.name}}</span></el-tag>
		  <el-tag closable v-for="one in tagDynamValue" class="tag" size="small" :key="one.businessId" @close="close(one.businessId, 'dynamicValue')"><span class="ellipsis">{{one && one.name}}</span></el-tag>
    </inputContent>
	</el-popover>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
import inputContent from '@/afterSales/components/select/inputContent.vue';
import moSelect from '@/afterSales/components/moSelect/index.vue';
import selectTree from '@/afterSales/components/moSelect/selectTree.vue';
@Component({
  name: 'memberDefault',
  components: {
    inputContent,
    moSelect,
    selectTree
  }
})
export default class extends Vue {
  @Prop(Object) public value!: any;
  @Prop({ default: 'member' }) public fieldType!: string;
  @Prop({ default: () => [] }) public fixedList!: any[];
  @Prop(Object) public fixedMap!: any; // gu ding zhi
  @Prop({ default: () => [] }) public dynamicList!: any[];
  @Prop({ default: false }) public isCheckbox!: boolean; // 是否多选
  @Prop(Object) public dynamicMap!: any;
  @Prop({ default: false }) public isFilter!: boolean;
  @Prop({
    default: () => ({
      value: '_id',
      id: '_id',
      name: 'name',
      children: 'children',
      label: 'name'
    })
  })
  public defaultProps!: any;

  private visible = false;
  private currActive = 'first';
  private get fixedValue () {
    const value = this.value.fixedValue;
    if (!value) {
      return this.isCheckbox ? [] : '';
    }
    if (this.isCheckbox) {
      return value.split(',');
    }
    return value;
  }

  private get tagDynamValue () {
    const value = this.value.dynamicValue;
    if (value) {
      return value.split(',').map((id) => {
        return this.dynamicMap[id] || {};
      });
    }
    return [];
  }

  private get dynamValue () {
    const value = this.value.dynamicValue;
    if (!value) {
      return this.isCheckbox ? [] : '';
    }
    if (this.isCheckbox) {
      return value.split(',');
    }
    return value;
  }

  private handleCheckChange (options) {
    if (this.currActive === 'first') {
      this.value.fixedValue = options.join(',');
    } else {
      this.value.dynamicValue = options.join(',');
    }
  }

  private handleClickNode (id) {
    if (this.currActive === 'first') {
      this.value.fixedValue = id
      this.value.dynamicValue = '';
    } else {
      this.value.fixedValue = '';
      this.value.dynamicValue = id || '';
    }
  }

  private get tagFixedValue () { // 固定值回显
    const value = this.value?.fixedValue;
    if (value) {
      return value.split(',').map((id) => {
        return this.fixedMap[id] || {};
      });
    }
    return [];
  }

  private close (id, type) {
    const clearId = id + '';
    const valueArr = this.value[type].split(',');
    this.value[type] = valueArr.filter((one) => one !== clearId).join(',');
  }

  private clear () { // 点击input清除
    this.value.fixedValue = '';
    this.value.dynamicValue = '';
  }

  private get isSelect () {
    if (this.tagFixedValue.length || this.tagDynamValue.length) {
      return true;
    }
    return false;
  }
}
</script>

<style lang="stylus" scoped>
.popver-head {
	border-bottom 1px solid #e6e6e6
	margin-bottom 10px
	.tabs-item {
		line-height 40px
		display inline-block
		cursor pointer
		padding 0px 10px
	}
}
.prompt {
	color #8c8c8c
	display block
	font-size 12px
	line-height 16px
	margin-top 4px
}
.radio {
	margin-left 28px
}
</style>
